<template>
  <h1>Hello Vue3</h1>
  <h2>{{ obj }}</h2>
  <h3>{{ number }}</h3>
  <button @click="btn">改数据</button>
  <button @click="btn2">点我加1</button>
  <button @click="number++">点我加1</button>
  <h3>{{ obj2 }}</h3>
  <button @click="obj2.age++">点我年龄+1</button>
</template>

<script>
/* 
  目标：掌握使用 ref 函数定义响应式数据，一般用于简单类型数据
*/
import { reactive, ref } from 'vue'
export default {
  setup() {
    // 通常是用来定义响应式对象数据
    const obj = reactive({
      name: '张三',
      age: 18,
    })

    const btn = () => {
      obj.age++
      console.log(obj)
    }

    // 通常是用来定义普通类型数据，如：字符串，数字，布尔，null，undefined
    const number = ref(1000)

    console.log(obj) // Proxy 响应式对象
    console.log(number) // Ref 响应式对象
    console.log(number.value) // 需要通过 .value 获取真正的值

    const btn2 = () => {
      number.value += 1
    }

    debugger
    // 🔔 如果 ref 传入的是一个对象，内部会通过 reactive 包装成响应式对象，访问对象的数据需要通过 .value 访问
    const obj2 = ref({
      name: '李四',
      age: 20,
    })
    console.log(obj2)

    return { obj, btn, number, btn2, obj2 }
  },
}
</script>

<style></style>
